<template>
    <div class="HomeView">
        <UserInfoCell :userInfo="getUserInfo">
            <template>
                <van-button class="arrow-left" round size="small" icon="arrow-left" @click="$router.go(-1)" />
            </template>
        </UserInfoCell>
        <van-cell-group @click="$router.push({ path: '/user_dynamic_home', query: { user_id: userInfo._id } })">
            <van-cell is-link center>
                <template #icon>朋友动态</template>
                <template #title>
                    <van-image class="image" fit="cover" width="3.125rem" height="3.125rem"
                        v-for="(item, index) in dynamic.at(-1)?.imageUrls" :key="index"
                        :src="item"
                    />
                </template>
            </van-cell>
        </van-cell-group>
        <van-cell-group>
            <van-button icon="wechat" size="large"
                @click="$router.push({ path: '/chat', query: { user_id: userInfo._id } })"
            >发信息</van-button>
        </van-cell-group>
    </div>
</template>

<script>
    import UserInfoCell from "@/components/common/userInfoCell.vue";
    import { mapActions, mapMutations, mapState } from "vuex";

    export default {
        name: "HomeView",
        data() {
            return {
                userInfo: '',
                dynamic: [],
            }
        },
        components: {
            UserInfoCell,
        },
        computed: {
            ...mapState(['friendList']),
            // 获取用户信息，添加备注名（如果存在）
            getUserInfo() {
                // 如果用户信息不存在，返回空对象
                if (!this.userInfo) return {};
                
                // 尝试找到好友信息
                const friend = this.friendList.find(item => item.friendId && item.friendId._id === this.userInfo._id);
                
                // 如果有好友信息且有备注
                if (friend && friend.remark && friend.remark.trim() !== '') {
                    // 返回一个新对象，添加备注名
                    return {
                        ...this.userInfo,
                        nickname: friend.remark  // 用备注名替换原昵称
                    };
                }
                
                // 如果没有备注或不是好友，返回原始用户信息
                return this.userInfo;
            }   
        },
        methods: {
            ...mapMutations('userInfo', ['upDynamic', 'upUserInfo']),
            ...mapActions('userInfo', ['getDynamic']),
        },
        async mounted() {
            if (this.$route.query?.user_id != undefined) {
                let res_dynamic = await this.getDynamic(this.$route.query?.user_id);

                this.dynamic = res_dynamic.dynamicList;
                this.userInfo = res_dynamic.userInfo;

                this.upDynamic(res_dynamic.dynamicList);
                this.upUserInfo(res_dynamic.userInfo);
            }
        },
    };
</script>

<style lang="less" scoped>
    .HomeView {
        .arrow-left {
            position: fixed;
            top: 1.25rem;
            left: 1.25rem;
            z-index: 1;
        }
        > *:nth-last-child(-n + 2) {
            margin-top: .625rem;
        }
    }
</style>
